<!DOCTYPE html>
<html lang="en">
<#include "/element-ui-tpls/head.html"/>
<body>
<div id="app" v-cloak>
    <el-container style="height: 100%; border: 1px solid #eee;">
        <#include "/element-ui-tpls/aside.html"/>
        <el-main>
            <span>>> 外网映射</span><hr>
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.domain" placeholder="请输入域名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="filters.ip" placeholder="请输入IP"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" border style="width: 100%; margin-top: 10px;">
                <el-table-column prop="domain" label="域名"></el-table-column>
                <el-table-column prop="outPort" label="外端口"></el-table-column>
                <el-table-column prop="ip" label="内IP"></el-table-column>
                <el-table-column prop="inPort" label="内端口"></el-table-column>
                <el-table-column prop="memo" label="描述"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="管理">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="doDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;">
                <el-pagination background layout="prev, pager, next"
                               :total="total" :page-size="pageSize" @current-change="changePage">
                </el-pagination>
            </div>

            <el-dialog title="编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                <el-form :model="form" ref="form" :rules="rules"  label-width="80px">
                    <el-form-item label="域名"  prop="domain">
                        <el-input v-model="form.domain" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="外端口"  prop="outPort">
                        <el-input v-model="form.outPort" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内IP"  prop="ip">
                        <el-input v-model="form.ip" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内端口"  prop="inPort">
                        <el-input v-model="form.inPort" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="memo">
                        <el-input v-model="form.memo" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="doSave">保存</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</div>

<#include "/element-ui-tpls/script.html"/>
<script>
    new Vue({
        el: '#app',
        data: {
            dialogFormVisible: false,
            tableData: [],
            total: 0,
            pageSize: __PAGE_SIZE,
            apis: {
                rest: '/bpi/nats',
            },
            filters: {
                domain: null,
                ip: null
            },
            form: {
                outPort: '',
                inPort: '',
                domain: '',
                ip: '',
                memo: ''
            },
            rules: {
                outPort: [
                    {required: true, trigger: 'blur'},
                ],
                inPort: [
                    {required: true, trigger: 'blur'},
                ],
                domain: [
                    {required: true, trigger: 'blur'}
                ],
                ip: [
                    {required: true, trigger: 'blur'}
                ],
            }
        },
        methods: {
            handleAdd: function() {
                this.form = {};
                this.dialogFormVisible = true;
            },
            handleEdit: function(row) {
                this.form = Object.assign({}, row);
                this.dialogFormVisible = true;
            },
            doSave: function() {
                var vm = this;
                this.$refs['form'].validate(function(valid) {
                    if (valid) {
                        axios.post(vm.apis.rest, vm.form)
                            .then(function (data) {
                                vm.dialogFormVisible = false;
                                vm.doQuery();
                            });
                    } else {
                        return false;
                    }
                });
            },
            doDelete: function(id) {
                var vm = this;
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(function() {
                    var url = vm.apis.rest +"/" + id;
                    axios.delete(url)
                        .then(function (data) {
                            vm.doQuery();
                        })
                }).catch(function() {});
            },
            handleSearch: function() {
                this.doQuery();
            },
            changePage: function(currPage) {
                this.doQuery(currPage);
            },
            doQuery: function(page) {
                var vm = this;
                var params =  Object.assign({page: page ? page : 1, size: vm.pageSize}, vm.filters);
                axios.get(this.apis.rest, {
                    params: params
                }).then(function (data) {
                    vm.tableData = data.content;
                    vm.total = data.totalElements;
                });
            }
        },
        mounted: function() {
            this.doQuery();
        },
    });
</script>
</body>
</html>